<template>
  <tr>
    <td v-for="item in header" :key=item.prop :style="{color: item.color&&oneData[item.prop]>0 ? 'red': ''}" :class="item.tooltip ? 'ellipsis-wrap': ''">
      <el-popover
        popper-class="common-tootip"
        placement="top-start"
        width="300"
        trigger="hover"
        v-if="item.tooltip"
        @show="show(item.prop)"
        :disabled="!oneData[item.prop]"
        :content="content[item.prop]">
        <span slot="reference" class="pop">{{oneData[item.prop]}}</span>
      </el-popover>
      <template v-else>
        {{oneData[item.prop] || 0}}
      </template>
    </td>
  </tr>
</template>
<script>
  import {isType} from '@/utils/monitor'
  export default {
    name: 'trQueue',
    data () {
      return {
        content: {
          checkInAgent: '',
          autoClaimDisplay: '',
          idleAgent: ''
        }
      }
    },
    props: {
      one: {type: Object, default: function () { return {} }},
      header: {type: Array, default: function () { return [] }}
    },
    computed: {
      oneData () {
        let one = this.one
        let onlineAgents = one.onlineAgents || []
        let autoClaimDisplay = 0
        let idleAgent = 0
        let checkInAgent = onlineAgents.length
        onlineAgents.forEach((item) => {
          if (item.autoClaim) {
            autoClaimDisplay++
            let agent = this.$store.state.monitor.table.agentMonitor[item.id] || ''
            if (agent && isType(agent, 'free')) {
              idleAgent++
            }
          }
        })
        let {DisplayName, manualSession, waitClaim, undealSession, messageSession} = one
        return {DisplayName, manualSession, waitClaim, undealSession, messageSession, checkInAgent, autoClaimDisplay, idleAgent}
      }
    },
    methods: {
      show (type) {
        let onlineAgents = this.one.onlineAgents || []
        let arr = []
        onlineAgents.forEach((item) => {
          let agent = this.$store.state.monitor.table.agentMonitor[item.id] || {}
          if (type === 'checkInAgent') {
            arr.push(`${agent.displayName}[${agent.exten}]`)
          } else if (type === 'autoClaimDisplay') {
            if (item.autoClaim) {
              arr.push(`${agent.displayName}[${agent.exten}]`)
            }
          } else if (type === 'idleAgent' && item.autoClaim) {
            if (isType(agent, 'free')) {
              arr.push(`${agent.displayName}[${agent.exten}]`)
            }
          }
        })
        this.content[type] = arr.join(' ,  ')
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .ellipsis
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    max-width 100%
    display inline-block
  .ellipsis-wrap
    max-width 400px
  .pop
    color $c-main
</style>
